<template>
  <div >
    <div style="margin-left: 20px">
      <input type="text" placeholder="请输入iss标题" v-model.trim="title"> <br>
      <textarea placeholder="请输入iss内容" v-model.trim="body" /> <br>
      <button @click="addIss">新增iss</button>
      <button @click="updateIss">修改iss</button>
    </div>

    <hr>

    <ul>
      <li v-for="(iss,index) in issList" :key="index">
        <span>{{iss.locked?"锁":"开"}}</span>
        <a href="javascript:;" style="color: red" @click="lockIss(iss.number)">lock</a>
        <a href="javascript:;" style="color: red" @click="unlockIss(iss.number)">unlock</a>
        <a href="javascript:;" @click="showIss(iss)">
          <span>title:{{iss.title}}</span>
          <span>body:{{iss.body}}</span>
        </a>
      </li>
    </ul>
  </div>
</template>

<script>
    import axios from "axios"
    //https://api.github.com  公共地址
    //最基本的五种请求: get(查询) post(新增) put(全量修改) patch(局部修改) delete(删除)
    export default {
        name: "Iss",
        data(){
          return {
             issList:[],
             title:"",
             body:"",
             number:""
          }
        },
        methods:{
          async getList(){
            // GET  /repos/{owner}/{repo}/issues
            const {data} = await axios({
              url:`https://api.github.com/repos/betterDamu/bj_181130/issues`,
              method:"get",
              headers:{
                Authorization:"token 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"
              }
            })
            this.issList = data.map(
              ({title,body,number,locked})=>({title,body,number,locked})
            ).slice(0,10);
          },
          async addIss(){
            const {title,body} = this;
            if(title && body){
              //POST /repos/{owner}/{repo}/issues
              //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
              const {status} = await axios({
                url:"https://api.github.com/repos/betterDamu/bj_181130/issues",
                method:"post",
                data:{title,body},
                headers:{
                  Authorization:"token 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"
                }
              })
              if(status === 201){
                //刷新界面
                await this.getList()
              }
            }else{
              alert("title 或 body不能为空")
            }
          },
          async showIss({title,body,number}){
            this.title = title;
            this.body=body;
            this.number=number;
          },
          async updateIss(){
            const {title,body,number} = this;
            if(title && body && number){
              //PATCH /repos/{owner}/{repo}/issues/{issue_number}
              //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
              const {status} = await axios({
                url:`https://api.github.com/repos/betterDamu/bj_181130/issues/${number}`,
                method:"patch",
                data:{title,body},
                headers:{
                  Authorization:"token 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"
                }
              })
              console.log(status);
              if(status === 200){
                //刷新界面
                await this.getList()
              }
            }else{
              alert("title 或 body不能为空")
            }
          },
          async lockIss(number){
            //PUT /repos/{owner}/{repo}/issues/{issue_number}/lock
            await axios({
              url:`https://api.github.com/repos/betterDamu/bj_181130/issues/${number}/lock`,
              method:"put",
              headers:{
                Authorization:"token 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"
              }
            })
          },
          async unlockIss(number){
            //DELETE /repos/{owner}/{repo}/issues/{issue_number}/lock
            await axios({
              url:`https://api.github.com/repos/betterDamu/bj_181130/issues/${number}/lock`,
              method:"delete",
              headers:{
                Authorization:"token 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"
              }
            })
          }
        },
        async created(){
          await this.getList()
          //....
        }
    }
</script>

<style scoped>

</style>
